import type { Metadata } from "next";
import Link from "next/link";
import "./globals.css";

export const metadata: Metadata = {
  title: "JAMstack Demo - Next.js",
  description: "一个基于 Next.js 的现代化 JAMstack 演示项目",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN">
      <body className="antialiased">
        <nav className="bg-white shadow-lg">
          <div className="max-w-7xl mx-auto px-4">
            <div className="flex justify-between h-16">
              <div className="flex items-center">
                <Link href="/" className="text-xl font-bold text-gray-800">
                  JAMstack Demo
                </Link>
              </div>
              <div className="flex items-center space-x-8">
                <Link href="/" className="text-gray-600 hover:text-gray-900">首页</Link>
                <Link href="/blog" className="text-gray-600 hover:text-gray-900">博客</Link>
                <Link href="/api-demo" className="text-gray-600 hover:text-gray-900">API 演示</Link>
                <Link href="/about" className="text-gray-600 hover:text-gray-900">关于我们</Link>
              </div>
            </div>
          </div>
        </nav>
        <main>{children}</main>
        <footer className="bg-gray-800 text-white py-8 mt-16">
          <div className="max-w-7xl mx-auto px-4 text-center">
            <p>&copy; 2024 JAMstack Demo. 使用 Next.js 构建。</p>
          </div>
        </footer>
      </body>
    </html>
  );
}
